<template>
    <div class="main">
        <el-form :inline="true" :model="serProForm" ref="serProRefForm" :rules="rules" class="serProForm">
            <el-form-item label="服务商名称" prop="name">
                <el-input v-model.trim="serProForm.name" placeholder="请输入" clearable maxlength="20" />
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="serProForm.status" placeholder="请选择" clearable>
                    <el-option label="正常" value="1" />
                    <el-option label="已拒绝" value="2" />
                    <el-option label="已解除" value="3" />
                    <el-option label="已拉黑" value="4" />
                </el-select>
            </el-form-item>
            <el-form-item label="加入时间">
                <el-date-picker v-model="serProForm.addTime" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD" format="YYYY-MM-DD" :disabled-date="disabledDate" />
            </el-form-item>
            <el-form-item label="手机号">
                <el-input v-model.trim="serProForm.phone" placeholder="请输入" clearable />
            </el-form-item>
        </el-form>
        <div class="serProBtnList">
            <el-button @click="handleSerProReset">重置</el-button>
            <el-button type="primary" @click="handleSerProSearch">查询</el-button>
            <el-button type="primary" @click="handleAddSerPro">添加服务商</el-button>
            <el-button type="primary" @click="handleSerProUpRecord">升级记录</el-button>
        </div>
        <div class="serProTable">
            <el-table :data="tableData" style="width: 100%" border :header-cell-style="{'background-color':'#ddd'}">
                <el-table-column v-for="(item,index) in columnList" :key="index" :prop="item.field" :label="item.label" :width="item.field=='idCard'||item.field=='InviteTime'||item.field=='addTime'?'180':'120'" align="center">
                    <template #default="{ row }">
                        <el-tag class="ml-2" type="success" v-if="item.field=='type'">{{row[item.field]}}</el-tag>
                        <el-avatar shape="square" v-else-if="item.field=='avator'" :size="60" :src="row[item.field]" />
                        <el-link type="primary" :underline="false" v-else-if="item.field=='contractInfo' || item.field=='shopInfo'" @click="handleUserInfo(item.field)">{{row[item.field]}}</el-link>
                        <span v-else>{{row[item.field]}}</span>
                    </template>
                </el-table-column>
                <!-- fixed="right" -->
                <el-table-column label="操作" width="180" align="center">
                    <template #default="{ row }">
                        <span v-if="row.status=='已拒绝'">已拒绝</span>
                        <div v-else-if="row.status=='正常'">
                            <el-link type="primary" :underline="false">拉黑</el-link>
                            <el-link type="primary" :underline="false">解除</el-link>
                        </div>
                        <div v-else-if="row.status=='待审核'">
                            <el-link type="primary" :underline="false">通过</el-link>
                            <el-link type="primary" :underline="false">拒绝</el-link>
                        </div>
                        <el-link type="primary" :underline="false" v-else-if="row.status=='邀请中'">发送支付链接</el-link>
                        <span v-else="row.status=='已拉黑'">已拉黑</span>
                        <span v-else="row.status=='已解除'">已解除</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>



<script>
import { defineComponent, ref, reactive, onMounted } from "vue";
import { serProTable } from "@/api/team";

export default defineComponent({
    setup() {
        // 表单
        const serProForm = ref({});
        const page = {
            index: 1,
            size: 30,
            total: 0,
        };
        // 表单验证规则
        const rules = reactive({});
        // 表格
        const tableData = [
            {
                name: "蔡徐坤",
                avator: "https://img2.baidu.com/it/u=2241857366,3597237048&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
                nickname: "姬霓太美",
                phone: "12000000000",
                idCard: "123456789123456789",
                type: "家禽",
                city: "成都",
                contractInfo: "查看合同",
                newCard: "团长",
                junior: "",
                juniorHell: "",
                shopInfo: "两年半的坤",
                volume: "123123.00",
                commission: "11000.00",
                status: "正常",
                InviteTime: "2023-08-29 08:00:00",
                addTime: "2023-08-29 09:00:00",
                shopNum: "100",
            },
            {
                name: "蔡徐坤",
                avator: "https://img2.baidu.com/it/u=2241857366,3597237048&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
                nickname: "姬霓太美",
                phone: "12000000000",
                idCard: "123456789123456789",
                type: "家禽",
                city: "成都",
                contractInfo: "查看合同",
                newCard: "团长",
                junior: "",
                juniorHell: "",
                shopInfo: "两年半的坤",
                volume: "123123.00",
                commission: "11000.00",
                status: "邀请中",
                InviteTime: "2023-08-29 08:00:00",
                addTime: "2023-08-29 09:00:00",
                shopNum: "100",
            },
            {
                name: "蔡徐坤",
                avator: "https://img2.baidu.com/it/u=2241857366,3597237048&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
                nickname: "姬霓太美",
                phone: "12000000000",
                idCard: "123456789123456789",
                type: "家禽",
                city: "成都",
                contractInfo: "查看合同",
                newCard: "团长",
                junior: "",
                juniorHell: "",
                shopInfo: "两年半的坤",
                volume: "123123.00",
                commission: "11000.00",
                status: "已拒绝",
                InviteTime: "2023-08-29 08:00:00",
                addTime: "2023-08-29 09:00:00",
                shopNum: "100",
            },
            {
                name: "蔡徐坤",
                avator: "https://img2.baidu.com/it/u=2241857366,3597237048&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
                nickname: "姬霓太美",
                phone: "12000000000",
                idCard: "123456789123456789",
                type: "家禽",
                city: "成都",
                contractInfo: "查看合同",
                newCard: "团长",
                junior: "",
                juniorHell: "",
                shopInfo: "两年半的坤",
                volume: "123123.00",
                commission: "11000.00",
                status: "待审核",
                InviteTime: "2023-08-29 08:00:00",
                addTime: "2023-08-29 09:00:00",
                shopNum: "100",
            },
        ];
        // 表头
        const columnList = [
            { label: "服务商名称", field: "name" },
            { label: "头像", field: "avator" },
            { label: "微信昵称", field: "nickname" },
            { label: "手机号", field: "phone" },
            { label: "身份证", field: "idCard" },
            { label: "商品品类", field: "type" },
            { label: "城市", field: "city" },
            { label: "合同信息", field: "contractInfo" },
            { label: "现身份", field: "newCard" },
            { label: "下级团长", field: "junior" },
            { label: "下级帮卖团长", field: "juniorHell" },
            { label: "店铺信息", field: "shopInfo" },
            { label: "交易额", field: "volume" },
            { label: "佣金", field: "commission" },
            { label: "状态", field: "status" },
            { label: "邀请时间", field: "InviteTime" },
            { label: "加入时间", field: "addTime" },
            { label: "商品数量", field: "shopNum" },
        ];
        // 重置
        const handleSerProReset = () => {
            // serProForm.value = {
            //     name: "",
            //     status: "",
            //     addTime: "",
            //     phone: "",
            // };
            let params = {
                pageNo: page.index,
                pageSize: page.size,
                username: serProForm.value.name? serProForm.value.name : "",
                accountState: serProForm.value.status ? serProForm.value.status : "",
                joinTimeStart: serProForm.value.addTime ? serProForm.value.addTime[0] + ' 00:00:00' : "",
                joinTimeEnd: serProForm.value.addTime ? serProForm.value.addTime[1] + ' 23:59:59' : "",
                mobile: serProForm.value.phone ? serProForm.value.phone : "",
            };
            serProTable(params).then((res) => {
                console.log("res", res);
            });
        };
        //禁止选择当前日期之后的日期
        const disabledDate = (val) => {
            return val.getTime() > new Date().getTime();
        };
        // 查询
        const handleSerProSearch = () => {};
        // 添加服务商
        const handleAddSerPro = () => {};
        // 升级记录
        const handleSerProUpRecord = () => {};
        // 合同信息or店铺信息
        const handleUserInfo = (data) => {
            console.log("data", data);
        };
        onMounted(() => {});
        return {
            serProForm,
            tableData,
            columnList,
            disabledDate,
            handleSerProReset,
            handleSerProSearch,
            handleAddSerPro,
            handleSerProUpRecord,
            handleUserInfo,
        };
    },
});
</script>

<style lang="scss" scoped>
.main {
    background-color: #fff;
    padding: 20px;
    margin: 20px;
    .serProForm {
        text-align: left;
    }
    .serProBtnList {
        display: flex;
        justify-content: flex-end;
        padding-right: 30px;
        margin-bottom: 30px;
    }
}
::v-deep .el-link {
    color: #409eff;
    font-size: 12px;
    margin: 0 5px;
}
::v-deep .el-table .cell {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
